<template>
  <div class="app-container home">
    <!-- 场馆首页 -->
    <h3 class="homeTitle">快捷入口</h3>
    <div class="fiveflex">
      <div class="fitem" @click="goVip">
        <img src="@/assets/img/btn01.png">
        <p>会员开卡</p>
      </div>
      <div class="fitem" @click="goOrder">
        <img src="@/assets/img/btn02.png">
        <p>场地预定</p>   
      </div>
      <div class="fitem">
        <img src="@/assets/img/btn03.png">
        <p>课程安排</p>
      </div>
      <div class="fitem">
        <img src="@/assets/img/btn04.png">
        <p>赛事安排</p>
      </div>
      <div class="fitem">
        <img src="@/assets/img/btn05.png">
        <p>商品售卖</p>
      </div>
		
    </div>
	
    <h3 class="homeTitle">今日运营情况</h3>
    <div class="fiveflex">
      <div class="wcard">
        <p class="ctitle">今日预定</p>
        <div class="cbody">
          <p><span>23</span>订场</p>
          <p><span>120000</span>金额</p>
        </div>
      </div>
      <div class="wcard">
        <p class="ctitle">今日会员</p>
        <div class="cbody">
          <p><span>23</span>新增</p>
          <p><span>120000</span>充值</p>
        </div>
      </div>
      <div class="wcard">
        <p class="ctitle">今日续费</p>
        <div class="cbody">
          <p><span>23</span>新增</p>
          <p><span>120000</span>充值</p>
        </div>
      </div>
      <div class="wcard">
        <p class="ctitle">即将到期 (3天)</p>
        <div class="cbody">
          <p><span>23</span>人数</p>
        </div>
      </div>
      <div class="wcard">
        <p class="ctitle">商品销售</p>
        <div class="cbody">
          <p><span>23</span>订单</p>
          <p><span>120000</span>金额</p>
        </div>
      </div>
    </div>
	
    <el-row :gutter="20">
      <el-col :span="12">
        <h3 class="homeTitle">今日场地预订</h3>
        <div class="wcard">
          <div class="topflex">
            <el-select><el-option>篮球</el-option></el-select>
            <el-button round plain type="primary" @click="goOrder">去预订<i class="el-icon-arrow-right" /></el-button>		
          </div>
          <!-- 预定时长图表 -->
          <div id="orderTimePieChart" class="fl" style="width: 50%;height: 300px;" />
          <!-- 预定平台图表 -->
          <div id="orderPlantPieChart" class="fr" style="width: 50%;height: 300px;" />
        </div>
			
      </el-col>
      <el-col :span="12">
        <h3 class="homeTitle">今日会员</h3>
        <div class="wcard">
          <div class="topflex">
            <el-button round plain type="primary" @click="goVip">会员列表<i class="el-icon-arrow-right" /></el-button>		
          </div>
          <!-- 充值消费图表 -->
          <div id="moneyPieChart" class="fl" style="width: 50%;height: 300px;" />
          <!-- 开卡充次图表 -->
          <div id="cardPieChart" class="fr" style="width: 50%;height: 300px;" />
        </div>
			
      </el-col>
    </el-row>
	
    <h3 class="homeTitle">商品销售</h3>
    <div class="wcard">
      <div class="topflex mb40">
        <el-radio-group v-model="type">
          <el-radio-button label="0">日</el-radio-button>
          <el-radio-button label="1">月</el-radio-button>
          <el-radio-button label="2">年</el-radio-button>
        </el-radio-group>
        <el-button round plain type="primary">售卖<i class="el-icon-arrow-right" /></el-button>		
      </div>
      <div class="fiveflex">
        <div class="wfitem">
          <img src="../assets/img/btn06.png">
          <p>
            销售金额 (元)
            <span>0</span>
          </p>
        </div>
        <div class="wfitem">
          <img src="../assets/img/btn07.png">
          <p>
            销售利润 (元)
            <span>0</span>
          </p>
        </div>
        <div class="wfitem">
          <img src="../assets/img/btn08.png">
          <p>
            销量
            <span>0</span>
          </p>
        </div>
        <div class="wfitem">
          <img src="../assets/img/btn09.png">
          <p>
            销售利润率 (%)
            <span>0</span>
          </p>
        </div>
        <div class="wfitem">
          <img src="../assets/img/btn10.png">
          <p>
            成本 (元)
            <span>0</span>
          </p>
        </div>
			
      </div>
    </div>
	
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref } from 'vue'
const router = useRouter()
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
const type = ref(0)
const { proxy } = getCurrentInstance()
function getChart() {
  const myChart = echarts.init(document.getElementById('orderTimePieChart'))
  const myChart2 = echarts.init(document.getElementById('orderPlantPieChart'))
  const myChart3 = echarts.init(document.getElementById('moneyPieChart'))
  const myChart4 = echarts.init(document.getElementById('cardPieChart'))
  const option = {
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: '预定时长',
      top: 'middle',
      left: 'center'
    },
    legend: {
      bottom: '0',
      left: 'center'
    },
    series: [
      {
        name: '预订时长',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 6
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        color: ['#4977ee', '#1ec886'],
        data: [
          { value: 2, name: '已预订（小时）' },
          { value: 2, name: '已预订（场次）' }
        ]
      }
    ]
  }
  
  const option2 = {
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: '预订平台',
      top: 'middle',
      left: 'center'
    },
    legend: {
      bottom: '0',
      left: 'center'
    },
    series: [
      {
        name: '预订平台',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 6
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        color: ['#FEA64B', '#F83E47', '#A570E9'],
        data: [
          { value: 2, name: '固定场地 (小时)）' },
          { value: 2, name: '在线预订 (小时)' },
          { value: 2, name: '前台预订 (小时)' }
        ]
      }
    ]
  }
  
  const option3 = {
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: '充值消费',
      top: 'middle',
      left: 'center'
    },
    legend: {
      bottom: '0',
      left: 'center'
    },
    series: [
      {
        name: '充值消费',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 6
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        color: ['#4977ee', '#1ec886'],
        data: [
          { value: 2000.00, name: '消费 (元)' },
          { value: 2000.00, name: '充值 (元)' }
        ]
      }
    ]
  }
  const option4 = {
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: '开卡充次',
      top: 'middle',
      left: 'center'
    },
    legend: {
      bottom: '0',
      left: 'center'
    },
    series: [
      {
        name: '开卡充次',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 6
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        color: ['#FEA64B', '#A570E9'],
        data: [
          { value: 2, name: '开卡 (元)' },
          { value: 2, name: '充次 (元)' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  myChart2.setOption(option2)
  myChart3.setOption(option3)
  myChart4.setOption(option4)
}

onMounted(() => {
  getChart()
})

function goVip() {
  router.push({ path: 'ven/member/men' })
}
function goOrder() {
  router.push({ path: 'ven/reserve/orderTable' })
}
</script>


<style scoped lang="scss">
.home {    
  background: RGBA(245, 247, 249, 1);
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
  ul {
    padding: 0;
    margin: 0;list-style-type: none;
  }
}
.homeTitle{font-weight: 500;color: #2B3133;}
.fiveflex{display: flex;justify-content: space-between;
	.fitem{width: 18%;border-radius: 3px;display: flex;align-items: center;    padding: 16px 15px;
		p{color: #fff;}
		img{margin-right: 20%;}
	}
	.wcard{width: 18%;border-radius: 3px;}
	.ctitle{border-left:2px solid #20C59D;line-height: 1;padding-left: 10px;color: #2B3133;}
	.cbody{display: flex;
		p{width: 50%;
		color: #7B7F83;}
		span{display: block;
		color: #2B3133;
		font-size: 26px;}
	}
	.wfitem{display: flex;    align-items: center;
		img{margin-right: 20px; width: 55px;height: 55px;}
		p{color: #7B7F83;}
		span{display: block;font-size: 26px;color: #2B3133;}
	}
}
.fitem:nth-child(1){background: linear-gradient(270deg, #54E1B9, #00CAA6);}
.fitem:nth-child(2){background: linear-gradient(270deg, #BE8EFB, #A76DF4);}
.fitem:nth-child(3){background: linear-gradient(90deg, #FEA449, #FFB95F);}
.fitem:nth-child(4){background: linear-gradient(270deg, #5E9AF3, #4169EC);}
.fitem:nth-child(5){background: linear-gradient(90deg, #F83841, #F76D74);}
.wcard{background: #fff; padding:15px;overflow: hidden;}
.topflex{display: flex;justify-content: space-between;}
.mb40{margin-bottom: 40px;}
</style>

